<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>HappyERP</title>
    <%= stylesheet_link_tag "images" %>

    <%= stylesheet_link_tag "/javascripts/ext4/resources/css/ext-all.css" %>

    <%= javascript_include_tag "ext4/ext-all-debug.js" %>
    <%= javascript_include_tag "ext4/locale/ext-lang-zh_CN.js" %>


    <%= csrf_meta_tag %>

    <script type="text/javascript">
      
      Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*'
      ]);
        
      Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*'
      ]);

      Ext.onReady(function() {
        //we want to setup a model and store instead of using dataUrl
        Ext.define('Task', {
          extend: 'Ext.data.Model',
          fields: [
            {name: 'task',     type: 'string'},
            {name: 'user',     type: 'string'},
            {name: 'duration', type: 'string'}
          ]
        });

        var store = Ext.create('Ext.data.TreeStore', {
          model: 'Task',
          proxy: {
            type: 'ajax',
            //the store will get the content from the .json file
            url: 'treegrid.json'
          },
          folderSort: true
        });

        //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
        var tree = Ext.create('Ext.tree.Panel', {
          title: 'Core Team Projects',
          width: 500,
          height: 300,
          renderTo: Ext.getBody(),
          //useArrows: true,
          rootVisible: false,
          store: store,
          //multiSelect: true,
          //singleExpand: true,
          //the 'columns' property is now 'headers'
          columns: [{
              xtype: 'treecolumn', //this is so we know which column will show the tree
              text: 'Task',
              flex: 2,
              sortable: true,
              dataIndex: 'task'
            },{
              //we must use the templateheader component so we can use a custom tpl
              xtype: 'templatecolumn',
              text: 'Duration',
              flex: 1,
              sortable: true,
              dataIndex: 'duration',
              align: 'center',
              //add in the custom tpl for the rows
              tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                formatHours: function(v) {
                  if (v < 1) {
                    return Math.round(v * 60) + ' mins';
                  } else if (Math.floor(v) !== v) {
                    var min = v - Math.floor(v);
                    return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                  } else {
                    return v + ' hour' + (v === 1 ? '' : 's');
                  }
                }
              })
            },{
              text: 'Assigned To',
              flex: 1,
              dataIndex: 'user',
              sortable: true
            }]
        });
      });
    </script>
  </head>
  <body>
  </body>
</html>
